import * as React from 'react';
import { StyleSheet, Image, View, Text, ScrollView } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import userLoginMsg from '../hooks/userLoginMsg';

export default function Index({navigation}) {
    const userLoginGlo = userLoginMsg();//登录信息
    console.log('登录信息', userLoginGlo);
    const skipToPage1 = (item:any) => {
        navigation.navigate('SearchList', {
            title: item.id,
        });
    };
    const skipToPage2 = (item:any) => {
        navigation.navigate('GoodDetail', {
            title: item.id,
        });
    };
    const listData1 = [{
        id: '101',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
        title: '京东超市',
    },{
        id: '102',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png',
        title: '数码电器',
    },{
        id: '103',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png',
        title: '京东服饰',
    },{
        id: '104',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png',
        title: '京东生鲜',
    },{
        id: '105',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png',
        title: '京东到家',
    },{
        id: '106',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png',
        title: '充值缴费',
    },{
        id: '107',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png',
        title: '领券',
    },{
        id: '108',
        uri: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png',
        title: '领金贴',
    }];
    const listData2 = [{
        id: '101',
        title: '碧云泉N9水素智能净水器家用 富氢加热一体反渗透台式直饮水净饮机 莱克 N9暮光-2020套装版 .',
        msg1: '$99',
        uri: '//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/199028/17/13486/141260/616aaedbE8f5d4de0/9801c7d899f7185a.jpg!q70.dpg.webp',
    },{
        id: '102',
        title: '碧云泉N9水素智能净水器家用 富氢加热一体反渗透台式直饮水净饮机 莱克 N9暮光-2020套装版 .',
        msg1: '$99',
        uri: '//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/206447/22/7347/116773/617d1ceaEf0eb7f4d/6b34065640915e12.jpg!q70.dpg.webp',
    },{
        id: '103',
        title: '碧云泉N9水素智能净水器家用 富氢加热一体反渗透台式直饮水净饮机 莱克 N9暮光-2020套装版 .',
        msg1: '$99',
        uri: '//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/199028/17/13486/141260/616aaedbE8f5d4de0/9801c7d899f7185a.jpg!q70.dpg.webp',
    },{
        id: '104',
        title: '碧云泉N9水素智能净水器家用 富氢加热一体反渗透台式直饮水净饮机 莱克 N9暮光-2020套装版 .',
        msg1: '$99',
        uri: '//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/199028/17/13486/141260/616aaedbE8f5d4de0/9801c7d899f7185a.jpg!q70.dpg.webp',
    },{
        id: '105',
        title: '碧云泉N9水素智能净水器家用 富氢加热一体反渗透台式直饮水净饮机 莱克 N9暮光-2020套装版 .',
        msg1: '$99',
        uri: '//img12.360buyimg.com/mobilecms/s372x372_jfs/t1/199028/17/13486/141260/616aaedbE8f5d4de0/9801c7d899f7185a.jpg!q70.dpg.webp',
    }];
    return (
        <ScrollView style={styles.container}>
            <View style={funListStyles.container}>
                {listData1.map((item:any) => {
                    return (<View style={funListStyles.listItem} onClick={() => skipToPage1(item)} key={item.id}>
                        <Image
                            style={funListStyles.itemIcon}
                            source={{
                                uri: item.uri,
                            }}
                        />
                        <Text style={funListStyles.itemInter}>{item.title}</Text>
                    </View>);
                })}
            </View>
            <View style={mallListStyles.container}>
                {listData2.map((item:any) => {
                    return (<View style={mallListStyles.listItem} onClick={() => skipToPage2(item)} key={item.id}>
                        <View style={mallListStyles.itemInter}>
                            <Image
                                style={mallListStyles.itemIcon}
                                source={{
                                    uri: item.uri,
                                }}
                            />
                            <View style={mallListStyles.itemText1}>
                                <Text>{item.title}</Text>
                            </View>
                            <View style={mallListStyles.itemText2}>
                                <Text style={mallListStyles.itemText21}>{item.msg1}</Text>
                                <Text style={mallListStyles.itemText22}>找相似</Text>
                            </View>
                        </View>
                    </View>);
                })}
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f8f8f8',
    },
});
//功能区列表
const funListStyles = StyleSheet.create({
    container: {
        backgroundColor: '#FFF',
        marginTop: 10,
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    listItem: {
        width: '25%',
        textAlign: 'center',
        paddingTop: 10,
    },
    itemIcon: {
        width: 40,
        height: 40,
        marginLeft: 'auto',
        marginRight: 'auto',
        textAlign: 'center',
    },
    itemInter: {
        flex: 1,
        lineHeight: 40,
    },
});
//商品列表
const mallListStyles = StyleSheet.create({
    container: {
        backgroundColor: '#f8f8f8',
        marginTop: 10,
        marginLeft: 5,
        marginRight: 5,
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    listItem: {
        width: '50%',
        boxSizing: 'border-box',
        marginBottom: 10,
    },
    itemInter: {
        backgroundColor: '#FFF', 
        marginLeft: 5,
        marginRight: 5,
        paddingBottom: 10,
    },
    itemIcon: {
        width: '100%',
        height: 172,
    },
    itemText1: {
        color: '#1a1a1a',
        display: '-webkit-box',
        WebkitLineClamp: 2,
        WebkitBoxOrient: 'vertical',
        wordBreak: 'break-all',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
    },
    itemText2: {
        display: 'flex',
        flexDirection: 'row',
    },
    itemText21: {
        flex: 1,
        textAlign: 'left',
        color: '#fa2c19',
    },
    itemText22: {
        textAlign: 'right',
        color: 'grey',
        fontSize: 11,
        height: 22,
        lineHeight: 22,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#f0f2f5',
        borderRadius: 10,
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
    },
});
